import { Layout, Breadcrumb, Card, Row, Col, Input, Button, Table, Pagination, Space, Switch, Modal, Form } from 'antd';
import { Component } from 'react';
import axios from '@/utils/index.js'
import {
  EditTwoTone,
  DeleteTwoTone,
  SecurityScanTwoTone,
} from '@ant-design/icons';
const { Search } = Input;

class User extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      columns: [
        { title: '#', dataIndex: 'id', key: 'id', },
        { title: '姓名', dataIndex: 'username', key: 'username' },
        { title: '邮箱', dataIndex: 'email', key: 'email', },
        { title: '电话', dataIndex: 'mobile', key: 'mobile', },
        { title: '角色', dataIndex: 'role_name', key: 'role_name', },
        {
          title: '状态', key: 'mg_state',
          render: (row, record) => (
            <Space>
              <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked onClick={() => this.editState(row, record.key)} />
            </Space>
          )
        },
        {
          title: '操作', key: 'action',
          render: (row, record) => (
            <Space size="middle">
              <Button icon={<EditTwoTone />} onClick={() => this.showeditModal(row, record.key)}></Button>
              <Button icon={<DeleteTwoTone />} onClick={() => this.removeItem(row, record.key)}></Button>
              <Button icon={<SecurityScanTwoTone />}></Button>
            </Space>
          ),
        },
      ],
      total: 10,
      visible: false,
      componentSize: 'Large',
      username: '',
      password: '',
      email: '',
      mobile: '',
      editvisible: false,
      id: '',
    }
  }
  //删除用户
  removeItem = async (row, key) => {
    console.log(key);
    console.log(row);
    let res = await axios.delete('/users/' + row.id)
    console.log(res);
    this.getUserlist()
  }
  componentDidMount() {
    this.getUserlist()
  }
  //获取数据
  getUserlist = async () => {
    let res = await axios.get("/users", { params: { pagenum: 1, pagesize: 5 } });
    this.setState({
      data: res.data.data.users,
      total: res.data.data.total
    })
  }
  //打开添加用户对话框
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  //打开修改用户对话框
  showeditModal = (row, key) => {
    console.log(key);
    this.setState({
      editvisible: true,
      username: row.username,
      email: row.email,
      mobile: row.mobile,
      id: row.id
    });
  };
  //关闭对话框
  hideModal = () => {
    this.setState({
      visible: false,
    });
  };
  //关闭修改用户对话框
  hideeditModal = () => {
    this.setState({
      editvisible: false,
    });
  }
  //添加用户
  addUser = async () => {
    let res = await axios.post('/users', { username: this.state.username, password: this.state.password, email: this.state.email, mobile: this.state.mobile })
    console.log(res);
    this.setState({
      visible: false
    })
    this.getUserlist()
  }
  //编辑用户
  editUser = async () => {
    let res = await axios.put('/users/' + this.state.id, { mobile: this.state.mobile, email: this.state.email })
    console.log(res);
    this.setState({
      editvisible: false
    })
    this.getUserlist()
  }
  //修改状态按钮
  editState = async (row, key) => {
    console.log(key);
    console.log(row);
    let res = await axios.put('/users/' + row.id, { mg_state: !row.mg_state })
    console.log(res);
  }
  onSearch = value => console.log(value);

  render() {
    return (
      <Layout>
        <Card>
          <Breadcrumb style={{ margin: '5px 0', marginBottom: "10px" }}>
            <Breadcrumb.Item href="home">主页</Breadcrumb.Item>
            <Breadcrumb.Item href="user">用户</Breadcrumb.Item>
            <Breadcrumb.Item href="/home/user/user">列表</Breadcrumb.Item>
          </Breadcrumb>
          <Row gutter={14} style={{ marginBottom: "10px" }}>
            <Col span={6}>
              <Search placeholder="请输入内容" onSearch={this.onSearch} style={{ width: 400 }} size='large' />
            </Col>
            <Col span={4}>
              <Button type="primary" size='large' style={{ marginLeft: "20px" }} onClick={this.showModal}>添加用户</Button>
            </Col>
          </Row>
          <Table pagination={false} columns={this.state.columns} dataSource={this.state.data} style={{ marginTop: "20px", marginBottom: "15px" }} rowKey="id" />
          <Pagination total={this.state.total} showTotal={total => `总计 ${total} 条`} defaultPageSize={5} defaultCurrent={1} />

          {/* 添加用户对话框 */}
          <Modal title="添加用户"
            visible={this.state.visible}
            onOk={this.addUser} onCancel={this.hideModal} okText="确认" cancelText="取消">
            <Form
              labelCol={{ span: 4, }}
              wrapperCol={{ span: 14, }}
              layout="horizontal"
              size={this.state.componentSize}>
              <Form.Item label="用户名">
                <Input onChange={e => { this.setState({ username: e.target.value }); }} />
              </Form.Item>
              <Form.Item label="密码">
                <Input onChange={e => { this.setState({ password: e.target.value }); }} />
              </Form.Item>
              <Form.Item label="邮箱">
                <Input onChange={e => { this.setState({ email: e.target.value }); }} />
              </Form.Item>
              <Form.Item label="手机">
                <Input onChange={e => { this.setState({ mobile: e.target.value }); }} />
              </Form.Item>
            </Form>
          </Modal>

          {/* 编辑用户对话框 */}
          <Modal title="修改用户"
            visible={this.state.editvisible}
            onOk={this.editUser} onCancel={this.hideeditModal} okText="确认" cancelText="取消">
            <Form
              labelCol={{ span: 4, }}
              wrapperCol={{ span: 14, }}
              layout="horizontal"
              size={this.state.componentSize}>
              <Form.Item label="用户名">
                <Input disabled value={this.state.username} />
              </Form.Item>
              <Form.Item label="邮箱">
                <Input value={this.state.email} onChange={e => { this.setState({ email: e.target.value }); }} />
              </Form.Item>
              <Form.Item label="手机">
                <Input value={this.state.mobile} onChange={e => { this.setState({ mobile: e.target.value }); }} />
              </Form.Item>
            </Form>
          </Modal>
        </Card>
      </Layout>
    );
  }
}


export default User;
